<!DOCTYPE html>
<html class="x-admin-sm">

<head>
    <meta charset="UTF-8">
    <title>新建赛事</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
    <link rel="stylesheet" href="../css/font.css">
    <link rel="stylesheet" href="../css/xadmin.css">
    <script type="text/javascript" src="../lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="../js/xadmin.js"></script>
    <script src="../js/base.js"></script>
    <script src="../js/jquery.min.js"></script>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<style>
    .layui-form-item .layui-input-inline {
        float: left;
        width: 571px;
        margin-right: 10px;
    }

    .layui-form-label {
        width: 100px;
    }
</style>

<body>
<div class="layui-fluid">
    <div class="layui-row">
        <form class="layui-form">
            <div class="layui-form-item">
                <label for="title" class="layui-form-label">
                    赛事标题<span class="x-red">*</span>：
                </label>
                <div class="layui-input-inline">
                    <select name="title" id="title" lay-search lay-verify="required" lay-filter="title">
                        <option value="">请选择（赛事名称-ID）</option>
                    </select>
                    <input type="text" id="newcompetitionId" style="display: none;">
                </div>
            </div>
            <div class="layui-form-item">
                <label for="type" class="layui-form-label">
                    赛事类型<span class="x-red">*</span>：
                </label>
                <div class="layui-input-inline">
                    <select name="type" id="type" lay-verify="required" lay-search>
                        <option value="">请选择</option>
                        <option value="国际联赛">国际联赛</option>
                        <option value="国内联赛">国内联赛</option>
                        <option value="省内联赛">省内联赛</option>
                        <option value="地方赛事">地方赛事</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label for="title" class="layui-form-label">
                    报名开始时间<span class="x-red">*</span>：
                </label>
                <div class="layui-input-inline">
                    <input type="text" id="regDate" name="regDate" required="" class="layui-input" lay-verify="required"
                           autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label for="title" class="layui-form-label">
                    报名结束时间<span class="x-red">*</span>：
                </label>
                <div class="layui-input-inline">
                    <input type="text" id="regEndDate" name="regEndDate" required="" class="layui-input" lay-verify="required"
                           autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label for="title" class="layui-form-label">
                    比赛开始日期<span class="x-red">*</span>：
                </label>
                <div class="layui-input-inline">
                    <input type="text" id="date" name="date" required="" class="layui-input" lay-verify="required"
                           autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label for="title" class="layui-form-label">
                    比赛结束日期<span class="x-red">*</span>：
                </label>
                <div class="layui-input-inline">
                    <input type="text" id="endDate" name="endDate" required="" class="layui-input"
                           lay-verify="required" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label for="title" class="layui-form-label">
                    举办城市<span class="x-red">*</span>：
                </label>
                <div class="layui-input-inline" style="width: 280px;">
                    <select id="s_province" name="province" lay-filter="s_province">
                    </select>
                </div>
                <div class="layui-input-inline" style="width: 280px;">
                    <select id="s_city" name="city" lay-filter="s_city">
                    </select>
                </div>

            </div>
            <div class="layui-form-item">
                <label for="title" class="layui-form-label">
                    主办单位<span class="x-red">*</span>：
                </label>
                <div class="layui-input-inline">
                    <input type="text" id="organizers" name="organizers" required="" lay-verify="required"
                           autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label for="title" class="layui-form-label">
                    承办单位<span class="x-red">*</span>：
                </label>
                <div class="layui-input-inline">
                    <input type="text" id="contractor" name="contractor" required="" lay-verify="required"
                           autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label for="title" class="layui-form-label">
                    比赛地点<span class="x-red">*</span>：
                </label>
                <div class="layui-input-inline">
                    <input type="text" id="address" name="address" required="" lay-verify="required"
                           autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">赛事简介：</label>
                <div class="layui-input-inline">
                    <textarea class="layui-textarea" id="content" style="display: none;"></textarea>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">赛事图片：</label>
                <div class="layui-input-inline" style="overflow: hidden">
                    <img src="" id="imgUrl" width="100%">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">上传图片：</label>
                <div class="layui-input-inline" style="width: 305px;">
                    <input type="text" class="layui-input" id="fileName" placeholder="上传文件" id="test2">
                </div>
                <div class="layui-input-inline" style="width: 50px;">
                    <button type="button" class="layui-btn" id="test1" style="height:30px;line-height:30px">选择文件
                    </button>
                </div>
            </div>
            <div class="layui-form-item" style="text-align: center">
                <button type="button" lay-filter="add" lay-submit="" class="layui-btn">确定</button>
                <button type="button" class="layui-btn layui-btn-primary" onclick="xadmin.close()">取消</button>
            </div>
        </form>
    </div>
</div>
<script src="../js/area.js"></script>
<script>
    _init_area()
    var contentEdit
    layui.use(['form', 'layer', 'laydate', 'layedit'],
        function () {
            $ = layui.jquery;
            var form = layui.form,
                layer = layui.layer;
            var laydate = layui.laydate;
            var layedit = layui.layedit;
            $.ajax({
                type: "post",
                url: findNewCompetitionList,
                data: {},
                success: function (res) {
                    for (var i = 0; i < res.list.length; i++) {
                        $("#title").append("<option value=\"" + res.list[i].id + "\">" + res.list[
                            i]
                            .name + "-" + res.list[i].id + "</option>");
                        form.render('select');
                    }
                },
                error: function (error) {
                    console.log(error)
                }
            })
            layedit.set({
                uploadImage: {
                    url: uploadCompetitions, //导入
                    method: "post",
                    field: "field"
                }
            });
            contentEdit = layedit.build('content', {
                tool: [
                    'strong' //加粗
                    , 'italic' //斜体
                    , 'underline' //下划线
                    , 'del' //删除线
                    , '|' //分割线
                    , 'left' //左对齐
                    , 'center' //居中对齐
                    , 'right' //右对齐
                    , 'link' //超链接
                    , 'unlink' //清除链接
                    , 'face' //表情
                    , 'image' //插入图片
                    , 'help' //帮助
                ],
                height: 400 //设置编辑器高度
            });

            //执行一个laydate实例
            laydate.render({
                elem: '#regDate' //指定元素
                ,
                format: 'yyyy-MM-dd'
            });
            //执行一个laydate实例
            laydate.render({
                elem: '#regEndDate' //指定元素
                ,
                format: 'yyyy-MM-dd'
            });

            //执行一个laydate实例
            laydate.render({
                elem: '#date' //指定元素
                ,
                format: 'yyyy-MM-dd'
            });
            laydate.render({
                elem: '#endDate' //指定元素
                ,
                format: 'yyyy-MM-dd'
            });
            // 监听select改变，省市联动
            form.on('select(s_province)', function (data) {
                change(1);
                form.render('select');
            });
            //监听select改变赛事名称获取信息
            form.on('select(title)', function (data) {
                $.ajax({
                    type: "post",
                    url: findNewcompetitionByIds1,
                    data: {
                        id: data.value
                    },
                    success: function (res) {

                        $("#regDate").val(dateFormat("YYYY-mm-dd", new Date(res.newcompetition
                            .teamApplyStartTime)))
                        $("#regEndDate").val(dateFormat("YYYY-mm-dd", new Date(res.newcompetition
                            .teamApplyEndTime)))
                        $("#date").val(dateFormat("YYYY-mm-dd", new Date(res.newcompetition
                            .competitionStartTime)))
                        $("#endDate").val(dateFormat("YYYY-mm-dd", new Date(res
                            .newcompetition.competitionEndTime)))
                        $("#s_province").val(res.newcompetition.province)
                        $("#organizers").val(res.newcompetition.organizers)
                        $("#contractor").val(res.newcompetition.contractor)
                        $("#address").val(res.newcompetition.address)
                        $("#content").val(res.newcompetition.content)
                        $("#newcompetitionId").val(res.newcompetition.id)
                        $("#newcompetitionId").attr("data-name", res.newcompetition
                            .contractor)
                        contentEdit = layedit.build('content', {
                            tool: [
                                'strong' //加粗
                                , 'italic' //斜体
                                , 'underline' //下划线
                                , 'del' //删除线
                                , '|' //分割线
                                , 'left' //左对齐
                                , 'center' //居中对齐
                                , 'right' //右对齐
                                , 'link' //超链接
                                , 'unlink' //清除链接
                                , 'face' //表情
                                , 'image' //插入图片
                                , 'help' //帮助
                            ],
                            height: 400 //设置编辑器高度
                        });
                        change(1)
                        $("#s_city").val(res.newcompetition.city)
                        form.render('select');
                    },
                    error: function (error) {
                        console.log(error)
                    }
                })
            });
            //监听提交
            form.on('submit(add)',
                function (data) {
                    // console.log($("#newcompetitionId").attr("data-name")); //获取到表单信息
                    if ($("#s_city").val() == "地级市" || $("#s_province").val() == "省份") {
                        layer.msg("请选择举办省市")
                        return false
                    }
                    if ($("#date").val() > $("#endDate").val()) {
                        layer.msg("比赛开始时间必须小于结束时间")
                        return false
                    }
                    if($("#regDate").val()> $("#regEndDate").val()){
                        layer.msg("报名开始时间必须小于结束时间")
                        return false
                    }
                    //报名结束时间必须大于比赛开始时间
                    if( $("#regEndDate").val() > $("#date").val()){
                        layer.msg("报名结束时间必须大于比赛开始时间")
                        return false
                    }
                    //发异步
                    $.ajax({
                        type: "post",
                        url: addCompetition,
                        data: {
                            title: $("#newcompetitionId").attr("data-name"),
                            newcompetitionId: $("#newcompetitionId").val(),
                            type: $("#type").val(),
                            content: layedit.getContent(contentEdit),
                            teamApplyStartTime: $("#regDate").val(),
                            teamApplyEndTime: $("#regEndDate").val(),
                            date: $("#date").val(),
                            endDate: $("#endDate").val(),
                            city: $("#s_city").val(),
                            province: $("#s_province").val(),
                            organizers: $("#organizers").val(),
                            contractor: $("#contractor").val(),
                            address: $("#address").val(),
                            imgUrl: $("#imgUrl").attr("src")
                        },
                        success: function (res) {
                            // console.log(res)
                            if (res.msg == 0) {
                                layer.alert("增加成功", {
                                    icon: 6
                                }, function () {
                                    //关闭当前frame
                                    xadmin.close();
                                    // 可以对父窗口进行刷新
                                    xadmin.father_reload();
                                });
                            } else {
                                layer.alert(res.msg, function (index) {
                                    if (res.msg == "session已失效，请重新登录") {
                                        parent.parent.window.location.href =
                                            getRequestPrefix() +
                                            "/footBallAdmin/login.html"
                                        xadmin.close();
                                    } else {
                                        layer.close(index);
                                    }
                                });
                            }
                        },
                        error: function (error) {
                            console.log(error)
                        }
                    })
                    return false;
                });

            layui.use('upload', function () {
                var upload = layui.upload;

                //执行实例
                var uploadInst = upload.render({
                    elem: '#test1',
                    url: uploadCompetition, //导入
                    method: "post",
                    accept: "images", //允许上传的文件类型
                    // exts: 'xlsx|xls',//上传的文件后缀.只能是xlsx和xls格式
                    size: 1000 * 1024, //设置文件最大可允许上传的大小，单位 KB
                    before: function (obj) {
                        obj.preview(function (index, file, result) {
                            $("#fileName").val(file.name)
                        });
                    },
                    //上传接口 //绑定元素
                    done: function (res) {
                        //上传完毕回调
                        if (res.msg == 0) {
                            $("#imgUrl").attr("src", res.url);
                            //do something （比如将res返回的图片链接保存到表单的隐藏域）
                            layer.msg("上传成功")
                        } else {
                            layer.msg(res.msg)
                        }
                    },
                    error: function () {
                        //请求异常回调
                        layer.closeAll('loading');
                        layer.msg('网络异常，请稍后重试！');
                    }
                });

            });

        });

    function dateFormat(fmt, date) {
        let ret;
        const opt = {
            "Y+": date.getFullYear().toString(), // 年
            "m+": (date.getMonth() + 1).toString(), // 月
            "d+": date.getDate().toString(), // 日
            "H+": date.getHours().toString(), // 时
            "M+": date.getMinutes().toString(), // 分
            "S+": date.getSeconds().toString() // 秒
            // 有其他格式化字符需求可以继续添加，必须转化成字符串
        };
        for (let k in opt) {
            ret = new RegExp("(" + k + ")").exec(fmt);
            if (ret) {
                fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))
            }
            ;
        }
        ;
        return fmt;
    }
</script>
</body>

</html>
